<script lang="ts" setup>
import { ref } from "vue";
const model = ref<string>("cat");
const options = [
  { label: "车", value: "cat" },
  { label: "设备", value: "device" },
];

const iframeRef = ref<HTMLIFrameElement | null>(null);
const onChange = (val: string) => {
  iframeRef.value.contentWindow.postMessage(val, "http://localhost:5173");
};
</script>

<template>
  <div class="son-view">
    <t-select
      v-model="model"
      :options="options"
      @change="onChange"
      class="select-com"
    ></t-select>
    <div class="if-box">
      <iframe
        src="/threejs/index.html"
        title="车"
        width="100%"
        height="100%"
        ref="iframeRef"
        name="childrenName"
      ></iframe>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.son-view {
  width: 100%;
  height: calc(100vh - 217px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .select-com {
    width: 320px;
    margin-bottom: 24px;
  }
  .if-box {
    flex: 1;
    iframe {
      border: none;
    }
  }
}
</style>
